<template>

  <div class="flie">



    <div v-if="userInfo">
      <el-input class="input" v-model="value" placeholder="请输入文件名" @input="search(value)">
      </el-input>

      <el-card v-for="(item, index) in fileData" :key="item.filename + item.userID" class="card" shadow="hover">
        <div class="content">
          <div class="left">
            <el-text class="l1" truncated>{{ item.filename }}</el-text>
          </div>

          <div class="right">
            <el-text class="" truncated>{{` ${formatFileSizeToMB(item.fileSize)}MB `}}</el-text>
            <el-button @click="getFile(item.filename, item.userID)">下载</el-button>
            <el-button @click="shareFile(item.filename, item.userID)">分享</el-button>
            <el-button type="danger" plain @click="open(item.filename)">删除</el-button>
          </div>

        </div>
        <div class="bottom" v-if="item.progress > 0">
          <el-progress :stroke-width="5" :percentage="item.progress" :status="item.status" />
        </div>
      </el-card>


    </div>
    <el-empty v-else description="这里空空如也，快去上传文件吧">
    </el-empty>
  </div>
  

  <el-dialog v-model="centerDialogVisible" title="分享码" width="500" center>
    <span>
      {{copyUrl}}
    </span>
  </el-dialog>
</template>

<script setup lang="ts">
import axios from 'axios';
import { useUserStore } from '@/stores/userStore';
const store = useUserStore();
import { useGoTo } from '@/hooks/useGoTo';
const { goTo } = useGoTo()

const userInfo = computed(() => store.user);

// 更新fileData的类型定义，添加progress属性  
interface FileDataItem {
  filename: string;
  userID: string;
  fileSize: number;
  progress: number; // 新增进度属性  
  status: any;   // 新增状态属性  
  // ...可能还有其他属性...  
}
const fileData = ref<FileDataItem[]>([]);
const value = ref()
const centerDialogVisible = ref(false)
const copyUrl = ref('')


function formatFileSizeToMB(fileSize) {
  const fileSizeInMB = fileSize / (1024 * 1024);
  return fileSizeInMB.toFixed(2);
}

const open = async (filename: string) => {
  ElMessageBox.confirm(
    '这个操作将永久性删除这个文件，继续吗？',
    'Warning',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      // 用户点击了确认按钮，执行删除操作  
      try {
        // 拼接 URL，包含 path 类型的 filename 和 query 类型的 userID  
        const url = `/api/file/del/${encodeURIComponent(filename)}?userID=${encodeURIComponent(userInfo.value.email)}`;

        // 发送 DELETE 请求  
        const response = await axios.delete(url);

        // 显示成功消息  
        ElMessage({
          type: 'success',
          message: '删除成功',
        });

        selectByAll();

      } catch (error) {
        // 显示错误消息  
        ElMessage({
          type: 'error',
          message: '删除文件失败: ' + error.message,
        });
      }
    })
    .catch(() => {
      // 用户点击了取消按钮，显示取消消息  
      ElMessage({
        type: 'info',
        message: '操作取消',
      });
    });
};

async function getFile(filename: string, userid: string) {
  try {
    // 对filename和userid进行URL编码  
    const encodedFilename = encodeURIComponent(filename);
    const encodedUserid = encodeURIComponent(userid);
    const url = `/api/file/download/${encodedFilename}?userID=${encodedUserid}`;

    // 查找要下载的文件项以获取fileSize  
    const fileItem = fileData.value.find(item => item.filename === filename && item.userID === userid);
    if (!fileItem) {
      throw new Error('无法找到文件项进行下载');
    }

    // 检查文件大小是否小于5MB（5MB = 5 * 1024 * 1024 字节）  
    const isFileSmall = fileItem.fileSize < (5 * 1024 * 1024);

    // 发送GET请求，设置响应类型为blob  
    const response = await axios.get(url, {
      responseType: 'blob',
      onDownloadProgress: function (progressEvent) {
        if (progressEvent.lengthComputable && !isFileSmall) { // 只在文件大于5MB时更新进度条  
          const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
          updateProgressBar(filename, userid, percentCompleted);
        }
      }
    });

    // console.log(response);
    // 如果需要打印原始filename  
    // console.log(filename);

    // 尝试从content-disposition头中获取文件名（可选）  
    let fileNameFromDisposition = '';
    const contentDisposition = response.headers['content-disposition'];
    if (contentDisposition && contentDisposition.includes('attachment')) {
      const matches = contentDisposition.match(/filename="(.*?)"/);
      if (matches && matches[1]) {
        fileNameFromDisposition = matches[1];
      }
    }

    // 如果从content-disposition中没有获取到文件名，则使用传入的filename  
    const downloadFileName = fileNameFromDisposition || filename;

    // 创建Blob对象，并生成一个指向它的URL  
    const blob = new Blob([response.data], { type: response.headers['content-type'] || 'application/octet-stream' });
    const downloadUrl = URL.createObjectURL(blob);

    // 创建一个隐藏的<a>元素来触发下载  
    const link = document.createElement('a');
    link.href = downloadUrl;
    link.download = downloadFileName; // 设置下载文件的默认名称  
    document.body.appendChild(link);

    // 模拟点击下载  
    link.click();

    // 清理资源  
    URL.revokeObjectURL(downloadUrl);
    document.body.removeChild(link);


    // 手动触发进度更新到100%，并设置状态为'success'  
    updateProgressBar(filename, userid, 100);


    ElMessage({
      message: '操作成功',
      type: 'success',
    });

  } catch (error) {
    ElMessage({
      message: '操作失败:' + error,
      type: 'error',
    });
  }
}


function updateProgressBar(filename: string, userid: string, percent: number) {
  const fileItem = fileData.value.find(item => item.filename === filename && item.userID === userid);
  if (fileItem) {
    fileItem.progress = percent; // 更新进度属性  
    fileItem.status = percent >= 100 ? 'success' : ''; // 更新状态属性  
  } else {
    console.warn(`无法找到文件项来更新进度: ${filename}, ${userid}`);
  }
}


async function search(value: string) {
  // 这里实现你的搜索逻辑，例如调用 API 
  try {
    if (userInfo.value != null) {
      const params = {
        filename: value,
        userID: userInfo.value.email
      }
      const response = await axios.get('/api/file/searchFile', { params });
      // 处理响应，例如导航到主页面或更新状态    
      console.log(response.data);
      // 假设response.data.data是一个文件列表数组  
      fileData.value = response.data.data.map(item => ({
        ...item, // 保留原有属性  
        progress: 0, // 设置初始进度为0  
        status: ''   // 设置初始状态为空字符串（或者'waiting'）  
      }));
      console.log(fileData.value)
    }



  }
  catch (error) {
    //   // 处理错误，例如显示错误消息给用户    
    console.error(error);
    //   // 可以使用 alert 或其他 UI 库来显示错误消息  
  }
  console.log('Searching for file:', value);
  // ... API 调用和其他逻辑 ...  
}


async function selectByAll() {
  try {
    if (userInfo.value != null) {
      const params = {
        userID: userInfo.value.email
      }
      const response = await axios.get('/api/file/selectByAll', { params });
      // console.log(response.data);
      fileData.value = response.data.data.map(item => ({
        ...item, // 保留原有属性  
        progress: 0, // 设置初始进度为0  
        status: ''   // 设置初始状态为空字符串（或者'waiting'）  
      }));
      // console.log(fileData.value)
    }



  }
  catch (error) {
    //   // 处理错误，例如显示错误消息给用户    
    console.error(error);
    //   // 可以使用 alert 或其他 UI 库来显示错误消息  
  }
}


async function shareFile(filename: string, userid: string) {
  try {
    const params = {
      filename: filename,
      userID: userid
    }
    const response = await axios.get('/api/file/shareFile', { params });
    // 处理响应，例如导航到主页面或更新状态  
    console.log(response.data);

    if (response.data.code === '200') {
      const textToCopy = response.data.data.shareID + '/' + response.data.data.filePass;
      try {
        await navigator.clipboard.writeText(textToCopy);
        ElMessage({
          message: '操作成功，已复制到剪贴板',
          type: 'success',
        });
      } catch (err) {
        console.error('复制失败:', err);
        ElMessage({
          message: '操作成功，但无法复制到剪贴板,请手动复制',
          type: 'warning',
        });

        copyUrl.value=textToCopy;
        centerDialogVisible.value = true
        
      }
    } else if (response.data.code === '-1') {
      ElMessage({
        message: response.data.msg,
        type: 'error',
      });
    }
  } catch (error) {
    ElMessage({
      message: '请求失败: ' + error,
      type: 'error',
    });
  }
}


onMounted(() => {
  selectByAll()

  if (!userInfo.value) {
    goTo('/user/login')
  }

})

</script>

<style scoped>
.card {
  width: 800px;
  margin-bottom: 10px;

}

.content {
  display: flex;
  justify-content: space-between;
}

.left {
  width: 70%;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  white-space: nowrap;
  /* 防止文本换行 */
  /* text-overflow: ellipsis; */
  /* 超出部分显示省略号 */

}

.l1 {
  width: 60%;
}

.right {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.bottom {
  width: 600px;
}

.input {
  margin-bottom: 30px;
  max-width: 600px;
}
</style>